<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head><?php require_once('inc/head.php'); ?></head>
<body onLoad="ajax_realTime()">
<div id="sandbar">
    <span class="blueBar"></span>
    <span class="orangeBar"></span>
    <div id="sbarMiddle" class="wrapper">
    	<div class="sbarLeft">
    		<a href="<?php echo DOMAIN; ?>" style="" ><div class="ntLogo"></div></a>
			<?php if(is_logged_in()){ ?>
				<div class="not-top" style="position: absolute; left: 200px; top: 5px;">
					<a href="#" class="updates" data-type="alert">
						<img src="<?php echo DOMAIN; ?>/img/notification.png" style="margin-left: 3px;">
						<img class="alert-icon hide" src="<?php echo DOMAIN; ?>/img/reg-alert-icon.png" style="margin-left: 3px; top: 5px; position: absolute;">
					</a>
					
					<div class="flyout hide" style="">
						<h1 class="left">Notifications</h1> 
						<span id="nReload" class="right"></span>
						<div class="clear"></div>
						<ul id="notificationWrap" class="" style="list-style: none;">
							<li class="eachNotice" style="min-height: 120px;">
								<img src="<?php echo DOMAIN; ?>/img/nt_loading100X100.gif" alt="Loading..." style="margin: 0 auto; width: 100px; display: block;"/>
							</li>
						</ul>
						<h1><a class="showNotification" href="index.php?page=notifications">Show All Notifications</a></h1>
						<br style="clear: both;" />
					</div>
				</div>
				<div class="msg-top" style="position: absolute; left: 230px; top: 5px;">
					<a href="#" class="updates" data-type="message">
						<img src="<?php echo DOMAIN; ?>/img/message.png" style="margin-left: 3px;">
						<img class="alert-icon hide" src="<?php echo DOMAIN; ?>/img/reg-alert-icon.png" style="margin-left: 3px; top: 5px; position: absolute;">
					</a>
					<div class="flyout hide" style="">
						<h1 class="left">Messages</h1> 
						<span id="nReload" class="right"></span>
						<div class="clear"></div>
						<ul id="msg-wrap" class="" style="list-style: none;">
							<li class="eachNotice" style="min-height: 120px;">
								<img src="<?php echo DOMAIN; ?>/img/nt_loading100X100.gif" alt="Loading..." style="margin: 0 auto; width: 100px; display: block;"/>
							</li>
						</ul>
						<h1><a class="showNotification" href="index.php?page=message">Show All Messages</a></h1>
					</div>
				</div>
			<?php } ?>
			
        </div>
        <div class="twistBar"></div>
        <div class="sbarRight">
            <div class="nav">
                <ul class="mainNavUl">
                    <li><a id="hStory" href="index.php?page=hot" class="mainNav <?php if($pageType == 'hot') { echo 'topCurrent'; } ?>">Hot</a></li>
                    <li><a id="fStory" href="index.php?page=fresh" class="mainNav <?php if($pageType == 'fresh') { echo 'topCurrent'; } ?>">Fresh</a></li>
                </ul>
            </div>
            <div class="settings">
            	<?php if(!is_logged_in()){ include('inc/loginForm.html'); } else { include('proc/userInfoBar.php'); } ?>
            </div>
        </div>
    </div>
</div>
<div id="mainBody" class="wrapper">
    <div id="leftCol" class="left">
		<?php
			
		?>
		
    	<div id="search" class="">
        	 <div id="search-form" action="" >  
                <span class="glass"><i></i></span> 
                <input value="" placeholder="Search" name="q" id="searchQuery" type="text" /> 
            </div>
        </div>
        <?php if(!is_logged_in() && $_SESSION['visitor'] != 1){ ?>
        	<!-- If not logged in, show registration form -->
            <div id="registration">
                <h1>First time user?</h1>
                <!-- Reg Form Starts -->
                <div id="regForm">
                    <p>Create your account here</p>
                    <form id="usr-reg" autocomplete="off">
                        <div id="sign-up" method="POST">
                            <div class="regFrmItem">
                                <label id="usernameLabel" class="formLabel">Username</label>
                                <input id="regUsername" name="Username" class="regInputItem ghost_text" placeholder="william.shakespeare" type="text">
                                <div id="regNameError" class="errorMsg hide clear rError">
                                    <span id="regNameInvalid" class="errorMsg hide rError">Your username is invalid. Special Characters & Space are not allowed.</span>
                                    <span id="regNameNull" class="errorMsg hide rError">You have left your name blank.</span>
                                    <span id="regNameExist" class="errorMsg hide rError">The username already exists.</span>
                                    <span id="regNameLength" class="errorMsg hide rError">Username should be more than 5 characters.</span>
                                </div>
                            </div>
                            <div class="regFrmItem">
                                <label id="emailLabel" class="formLabel">Email</label>
								<input id="regEmail" name="email" class="regInputItem ghost_text" placeholder="shakespeare@gmail.com" type="text">
                                <img id="regLoading"  class="hide" src="img/ajaxLoader.gif" />
                                <div id="regError" class="errorMsg hide clear rError">
                                    <span id="regTrue" class="errorMsg hide rError">Your email is already registered. Please <a class="showIn" href="#">login</a> instead.</span>
                                    <span id="regNull" class="errorMsg hide rError">Oops, you left the email field blank.</span>
                                    <span id="regInvalid" class="errorMsg hide rError">Your email seems to be invalid.</span>
                                </div>
                            </div>
                            <div class="regFrmItem">
								<label id="pwdLabel" class="formLabel">Password</label>
                                <input id="regPwd" name="pwd" class="regInputItem ghost_text" placeholder="Password" type="password">
                                <div id="regPwdError" class="errorMsg hide clear rError">
                                    <span id="regPwdNull" class="errorMsg hide rError">Please enter your password.</span>
                                    <span id="regPwdLength" class="errorMsg hide rError">Password should be more than 5 characters.</span>
                                </div>
                            </div>
							<div class="regFrmItem">
								<input id="terms" name="Terms" type="checkbox" value="agree" />
								<label class="formLabel">I agree to these <a id="termsClick" href="#" >Terms & Conditions</a></label>
							</div>
                            <button id="regBtn" name="regBtn" type="button" class="btnB">Sign Up</button>
                            <div class="clear"></div>
							
                        </div>
						<div id="loginBtnHolder">
							<div id="alreadyFB" class="fb-login-button hide" scope="email" >Login with Facebook</div>
							<div class="fb-preLogin hide" style="float: left; width: 150px;" >
								<a class="fb_button fb_button_medium">
									<span class="fb_button_text">Login with Facebook</span>
								</a>
							</div>
							<div class="clear"></div>
						</div>
                    </form>
                    <div id="forgot-p" class="reg-frm-item item forgot"><a href="index.php?page=forgot">Forgot your Password?</a></div>
                </div>  
                <!-- Reg Form Ends -->
            </div>
        <?php } else { ?>
			<div id="invite" class="">
				<a href="index.php?page=invite">+ Invite your friend to Next Twist</a>
				<img src="<?php echo DOMAIN; ?>/img/m-nt.png" alt="Next Twist Mobile" style="margin-top: 25px; border-top: 1px solid #CCC; padding-top: 20px;"/>
				<h5 style="margin-top: 10px;">Next twist for mobile coming soon</h5>
			</div>
        <?php } ?>
		<ul class="meta-links">
			<li>&copy; 2011 Next Twist</li>
			<li><a href="http://blog.nexttwist.com">Blog</a></li>
		</ul>
    
    </div>
    <div id="rightCol" class="left">
    	<?php

			//If page found, load page else load 404 page
			if(!($pageerror == 1 || $pageType == 'error')) {
				
				//If loaded page is a reserved keyword, then load proper pages else load user profile page
				if(isReserved($pageType)){
					if($pageType == 'splash' || $pageType == 'index.php') { include('splash.php'); } 
					elseif($pageType == 'forgot') { include("forgot.php"); }
					elseif($pageType == 'hot' || $pageType == 'fresh') { include("home.php"); }
					elseif($pageType =='story' && $id != NULL ) { include("story.php"); }
					elseif($pageType == 'settings') { include("setting.php"); }
					elseif($pageType == 'notifications') { include("notifications.php"); }
					elseif($pageType == 'activate') { include("activate.php"); }
					elseif($pageType == 'invite') { include("invite.php"); }
					elseif($pageType == 'message') { include("message.php"); }
					else { include('errorpage.php'); }
				} else {
					//If it's profile page, check if user exist
					$query = "SELECT `userid` FROM `users` WHERE `username` = '{$pageType}' AND `delete flag` = 'N' LIMIT 1";
					$pagequery = mysql_query($query, $connection);
					if(mysql_num_rows($pagequery) == 1) { 
						//Load user profile
						include("profile.php");
					} else {
						include('errorpage.php');
					}
				}
			} else {
				include('errorpage.php');
			}
			
		?>
	</div>
</div>
<div class="loadingHolder hide">
	<img src="<?php echo DOMAIN; ?>/img/ajaxLoader.gif" >
</div>

<div id="overlay" class="hide popShow"></div>
<div id="modalWrap" class="hide popShow">
	<div id="mClose" class="modalClose">x</div>
	<div id="modalCon"></div>
</div>

<?php 
	//twitter registration & login
	if(isset($_GET['register'])){ ?>
		<div id="modalWrap" class="popShow">
			<div id="mClose" class="modalClose">x</div>
			<div id="modalCon">
				<?php 
					if($_GET['register'] == 'merge'){
						include('inc/ttrRegForm.php');
					} elseif($_GET['register'] == 'complete'){ ?>
					Ask for email and complete
				<?php } ?>
			</div>
		</div>
<?php } ?>


 <?php if(is_logged_in()){ ?>
		<div id="fBack" class="fBox btnGrey">Report Bugs</div>
<?php } ?>

<div id='fb-root'></div>

<!--  jQuery -->
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/jquery-ui.min.js"></script>

<!--  To Check HTML5 support -->
<script src="<?php echo DOMAIN; ?>/js/modernizr.min.js"></script>

<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/jquery.form.min.js"></script>
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/jquery.scrollTo-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/charCount.min.js"></script>
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/jquery.timeago.min.js"></script>
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/jquery.Jcrop.min.js"></script>

<!--  Ghost Text -->
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/ghost.min.js"></script>
<!-- For auto expanding text area-->
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/jquery.elastic.js"></script>

<!-- Custom JavaScript -->
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/scripts.min.js"></script>
<script type="text/javascript" src="<?php echo DOMAIN; ?>/js/main.min.js"></script>


<script>

	var DOMAIN = "http://" + window.location.host; //"http://nexttwist.com";
	var FB_APP_ID = '159689347447673';
	
	window.fbAsyncInit = function() {
		FB.init({
		  appId      : FB_APP_ID, // App ID
		  channelUrl : DOMAIN + '/inc/channel.html', // Channel File
		  status     : true, // check login status
		  cookie     : true, // enable cookies to allow the server to access the session
		  xfbml      : true  // parse XFBML
		});

		//Facebook JS SDK
		FB.Event.subscribe('auth.login', function(response) {
			fblogin();
		});

		FB.getLoginStatus(function(response) {
		   if (response.status === 'connected') {
			// the user is logged in and has authenticated your
			
			//For bf button on registration form
			$('#loginBtnHolder .fb-login-button').hide();
			$('#loginBtnHolder .fb-preLogin').show();
			
			//For bf button on login form
			$('#fbHolder2 .fb-login-button').hide();
			$('#fbHolder2 .fb-preLogin').show();
		  } else {
			// the user isn't logged in to Facebook.
			//For bf button on registration form
			$('#loginBtnHolder .fb-login-button').show();
			$('#loginBtnHolder .fb-preLogin').hide();
			
			//For bf button on login form
			$('#fbHolder2 .fb-login-button').hide();
			$('#fbHolder2 .fb-preLogin').show();
		  }
		});
	};

	// Load the SDK Asynchronously
	(function(d){
		var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
		if (d.getElementById(id)) {return;}
		js = d.createElement('script'); js.id = id; js.async = true;
		js.src = "//connect.facebook.net/en_US/all.js";
		ref.parentNode.insertBefore(js, ref);
	}(document));

	function callFB(line, eline, stryid, uid){
		 FB.ui({
			method: 'feed',
			name: 'Next Twist',
			link: DOMAIN + '/index.php?page=story&id=' + stryid +'&title='+line,
			picture: DOMAIN + '/img/twistBar.png',
			caption: 'Crowdsourced twists',
			description: eline
		  },
		  function(response) {
			if (response && response.post_id) {
			  $('#modalWrap').show('clip', { direction: 'horizontal' }, 100)
			  $('#modalCon').html("<div class='pMsg'>Successfully posted on your wall.</div><button id='okBtn' class='btnB modalClose pBtn'>OK</button>");
			}
		 });
	}

	$('.fb-preLogin').live('click', function(){
		FB.login(function(response) {
			if (response.authResponse) {
				fblogin();
			} else {
				console.log('User cancelled login or did not fully authorize.');
			}
		});
	});

	function fblogin(){
		FB.api('/me', function(response) {
			var data = {
				'id' : response.id,
				'email' : response.email,
				'fname' : response.first_name,
				'lname' : response.last_name,
				'username' : response.username,
				'type': 'login'
			}
			var calUrl = DOMAIN+"/proc/fblogin.php";
			var name = response.username;
			
			$.getJSON(calUrl, data, function (json){
				if(json.status == 'login'){ 
					window.location = "/";
				} else if (json.status == 'register'){
					window.location = "/"+name;
				} else if (json.status == 'merge'){
					$('#overlay').show();
					$('#modalWrap').show('clip', { direction: 'horizontal' }, 100)
					$('#modalCon').html("<div class='pMsg'><p>We have detected you already have a Next Twist account with your email "+ response.email+".</p><p>It will be merged with your Facebook account.</p></div><button id='fbConfirm' class='btnB modalClose pBtn'>Ok</button>");
				} else if (json.status == 'username'){
					$('#modalWrap').show('clip', { direction: 'horizontal' }, 100)
					var loadUrl = DOMAIN+'/inc/fbRegForm.html';
					$('#modalCon').load(loadUrl);
				}
			});
		});
	}

</script>
<!-- Asynchronous load for G+ button -->
<script type="text/javascript">
  (function() {
	var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
	po.src = 'https://apis.google.com/js/plusone.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</body>
</html>